<template>
  <el-container>
    <el-header class="auto">
      <el-button type="primary" icon="el-icon-circle-plus" @click="dialogFormVisible=true" style="margin: 10px;">新增</el-button>
      <!--搜索框-->
      <el-form :inline="true" :model="input" class="demo-form-inline" style="text-align: left;">

        <el-form-item label="部门ID">
          <el-input v-model="input.id" placeholder="部门ID"></el-input>
        </el-form-item>

        <el-form-item label="部门名">
          <el-input v-model="input.name" placeholder="部门名"></el-input>
        </el-form-item>

        <el-form-item label="部门简称">
          <el-input v-model="input.key" placeholder="部门简称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <!--end搜索框-->
    </el-header>
    <el-main style="padding: 0;">
      <el-table
        :data="deptList"
        style="width: 100%"
        :default-sort = "{prop: 'id', order: 'ascending'}"
      >
        <el-table-column
          prop="id"
          label="ID"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="部门名"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.title"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="key"
          label="部门简称"
          sortable>
          <template slot-scope="scope">
            <el-input v-model="scope.row.short_name"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          prop="state"
          label="状态"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!--操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div> <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"> <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button></div>
            </div>


          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-pagination
      background
      style="padding: 20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[5,10,20]"
      :page-size="pageNum"
      layout="prev, pager, next,sizes"
      :total="deptTotal">
      >
    </el-pagination>
    <!--对话框form-->
    <el-dialog title="新增部门" :visible.sync="dialogFormVisible" >
      <el-form :model="form">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门简称" :label-width="formLabelWidth">
          <el-input v-model="form.key" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁止" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDept">确 定</el-button>
      </div>
    </el-dialog>
    <!--end 对话框form-->

  </el-container>
</template>

<script>
    import {editDept,addDept} from '@/apilist/SystemSetting'
    import {mapState,mapActions} from 'vuex'
    export default {
        name: "setDept",
        data() {
            return {
                list: [],
                input: {id: '', name: '', key:''},
                page:1,
                pageNum:5,
                total:0,
                options:[
                    {label:'正常',value:1},
                    {label:'禁止',value:0},
                ],
                dialogFormVisible:false,
                form:{
                    name:'',
                    key:'',
                    state:'',
                },
                formLabelWidth: '120px',
            }
        },
        computed: {
            ...mapState("Setdata",["deptList","deptTotal"]),
        },
        methods: {
            ...mapActions("Setdata",["getDeptListAction"]),

            handleEdit(row) {
                let params = {
                    id:row.id,
                    name:row.title,
                    key:row.short_name,
                    state:row.status,
                };
                editDept(params).then(res=>{
                    //console.log(res.data.msg);
                    //return ;
                    if(res.state == 'ok') this.$message({message:res.msg,type:'success'});
                    else this.$message.error(res.msg);
                });
            },
            handleDelete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.rem(id);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'+id
                    });
                });
            },
            //请求后台数据
            getList(){
                let that = this;
                let params = {
                    id:that.input.id,
                    name:that.input.name,
                    key:that.input.key,
                    page:that.page,
                    pageNum:that.pageNum,
                };
                this.getDeptListAction(params)

                console.log(this.deptList,this.deptTotal)
            },
            onSubmit() {
                this.getList();
            },
            handleSizeChange(val) {
                this.pageNum = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            //删除元素
            rem(id){
                let len = this.list.length;
                let k= 0;
                for(let i=0;i<len;i++){
                    if(this.list[i]['id'] == id) k = i;
                }
                this.list.splice(k,1);
            },
            //添加部门
            addDept(){
                let params = {name:this.form.name,key:this.form.key,state:this.form.state};
                addDept(params).then(res=>{
                  let _this = this;
                    if(res.state == 'ok') {
                        _this.$message({type:'success',message:res.msg,onClose:function(){
                                params['id'] = res.data;
                                _this.dialogFormVisible = false;
                                _this.getList();
                            }});
                    }else{
                        this.$message.error(res.msg);
                    }
                });

            },
            //test
            test(){
                alert('关闭');
            }
        },

    }
</script>

<style scoped>

</style>
